<template>
    <div align="center">
    <h2>显示房间类型</h2>
    <span>房间类型名称</span>
    <input type="text" v-model="state.name">
    <input type="button" value="查询" @click="roomdata">
    <table border="1">
        <thead>
            <tr>
            <td>房型名称</td>
            <td>房型图片</td>
            <td>房型面积</td>
            <td>可住人数</td>
            <td>房价</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
            <tr v-for="item in list">
            <td>{{ item.roomTypeName }}</td>
            <td><img :src="'https://localhost:7125'+item.roomTypeImg" width="50" height="50"></td>
            <td>{{item.roomTypeArea }}</td>
            <td>{{ item.inPeople }}</td>
            <td>{{item.roomTypePrice }}</td>
            <td>操作</td>
            </tr>
        </tbody>
    </table>
    总页数：{{ totalpage }}
    总条数:{{ totalcount }}
    <input type="button" value="首页" @click="gopage('a')">
    <input type="button" value="上一页" @click="gopage('b')">
    <input type="button" value="下一页" @click="gopage('c')">
    <input type="button" value="尾页" @click="gopage('d')">
    </div>
    
</template>

<script setup lang="ts">
import axios from 'axios';
import { reactive,toRefs,onMounted } from 'vue';
const data:any=reactive({
    state:{
        name:'',
        pageindex:1,
        pagesize:2
    },
    list:[],
    totalcount:0,
    totalpage:0
 })
const {state,list,totalcount,totalpage}=toRefs(data);

onMounted(()=>{
    roomdata();
})
//分页
const gopage=(str:any)=>{
    switch(str)
    {
        case 'a':
            state.value.pageindex=1;
            console.log('首页');
            break;
        case 'b':
            if(state.value.pageindex<totalpage.value)
            {
                alert('开始翻页');
                return;
            }
            state.value.pageindex--;
            break;
        case 'c':
        if(state.value.pageindex==totalpage.value)
            {
                alert('最后一页');
                return;
            }
            state.value.pageindex++;
            break;
        case 'd':
            if(state.value.pageindex==totalpage.value)
            {
                alert('到底');
                return;
            }
        state.value.pageindex=totalpage.value;
        console.log('尾页');
            break;
    }
    roomdata();
}




//显示数据
const roomdata=()=>{
    axios({
        url:'/api/Room/ShowHouse',
        method:'get',
        params:state.value
    })
    .then((res)=>{
        console.log(res.data);
        list.value=res.data.data;
        totalcount.value=res.data.totalcount;
        totalpage.value=res.data.totalpage;
    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>